<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=""/>
<script src="" >
</script>
<script src="js/jquery-3.1.0.js" >
</script>
<script src="js/learn_jq_2.js" >
</script>

<style>
.btns{
    width:150px;
    height:35px;
    border:1px solid #0000ff;
    background-color:#ffff00;
    margin-top:3px;
}
.btns:hover{
    background-color:#00ff00;
}

#content1{
    width:350px;
    background-color:#d1d0a8;
}
.listContent{
    display:none;
    margin:0;
    padding:0;    
    position:relative:
    top:-30px;
}
.listContent ul{
    list-style:none;
    padding:0;
    margin:0;
}
</style>

</head>
<body>
    <button id="ajax_test" >测试jq_ajax</button>
    <div id="content1" >
        <button id="dragdwon1" >第一章</button><br>
        <div id="listContent1" class="listContent" >
            <ul>
                <li><a href="#">简介</a></li>
                <li><a href="#">安装</a></li>
                <li><a href="#">hello world</a></li>
            </ul>
        </div>
        <button id="dragdwon2" >第二章</button><br>
        <div id="listContent2" class="listContent" >
            <ul>
                <li><a href="#">数据类型</a></li>
                <li><a href="#">语句</a></li>
                <li><a href="#">函数</a></li>
            </ul>
        </div>
        <button id="dragdwon3" >第三章</button><br>
        <div id="listContent3" class="listContent">
            <ul>
                <li><a href="#">字符串、数组、字典讲解</a></li>
                <li><a href="#">面向对象</a></li>
                <li><a href="#">网络编程</a></li>                
            </ul>
        </div>
        <button id="dragdwon4" >第四章</button><br>
        <div id="listContent4" class="listContent">
            <ul>
                <li><a href="#">web实践</a></li>
                <li><a href="#">游戏实践</a></li>
                <li><a href="#">总结</a></li>
            </ul>
        </div>
    </div>
</body>
</html>